<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">权限管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片 -->
    <el-card>
      <el-button
        type="primary "
        @click="
          model = {};
          tanchu = true;
        "
        >添加数据</el-button
      >
      <Table :cols="cols" :data="roles">
        <template v-slot:menus="{ row }">
          <Tags @close="addTag(row, $event)" :children="row.children" />
        </template>

        <template v-slot:action="{ row }">
          <el-button
            type="primary "
            size="mini"
            @click="
              tanchu = true;
              model = { ...row };
            "
            >编辑</el-button
          >
          <el-button type="danger " size="mini" @click="adddelet(row)"
            >删除</el-button
          >
          <el-button
            type="warning "
            size="mini"
            @click="
              getMenusLList();
              model = { ...row };
            "
            >分配权限</el-button
          >
        </template>
      </Table>

      <!-- 菜单列表弹出框 -->
      <el-dialog :visible.sync="fenpeitanchu" title="分配权限">
        <span slot="footer">
          <el-tree
            ref="tree"
            :data="authList"
            :props="aa"
            node-key="id"
            default-expand-all
            show-checkbox
            :default-checked-keys="keys"
          >
          </el-tree>
        </span>
        <div slot="footer" class="dialog-footer">
          <el-button @click="fenpeitanchu = false">取 消</el-button>
          <el-button type="primary" @click="addLIst">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog :visible.sync="tanchu" :title="title + '用户'">
        <el-form :model="model" label-width="80px">
          <el-form-item label="角色名称" prop="roleName">
            <el-input
              placeholder="该选项不能为空"
              v-model="model.roleName"
            ></el-input>
          </el-form-item>
          <el-form-item label="角色描述" prop="roleDesc">
            <el-input v-model="model.roleDesc"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="tanchu = false">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import Tags from "./components/tags.vue";
import Table from "@/components/Table.vue";
import {
  getMenusList,
  editList,
  getMenusTree,
  addRolesList,
  deletList,
  deleteTag,
  assignRights,
} from "../api/roles";
export default {
  components: { Table, Tags },
  data() {
    return {
      aa: {
        children: "children",
        label: "authName",
      },
      count: 1,
      fenpeitanchu: false,
      //获取菜单列表
      authList: [],
      model: {
        roleName: "",
        roleDesc: "",
      },
      keys: [],
      tanchu: false,
      roles: [],
      cols: [
        {
          title: "",
          type: "expand",
          slot: "menus",
        },
        {
          title: "#",
          type: "index",
        },
        {
          title: "名称",
          name: "roleName",
        },
        {
          title: "描述",
          name: "roleDesc",
        },

        {
          slot: "action",
          title: "操作",
          width: 270,
        },
      ],
    };
  },
  computed: {
    title() {
      return this.model.id ? "修改" : "添加";
    },
  },
  created() {
    this.getMenus();
  },
  methods: {
    async addLIst() {
      try {
        const tree = this.$refs.tree;
        const keys = [...tree.getCheckedKeys(), ...tree.getHalfCheckedKeys()];
        await assignRights(this.model.id, keys.join(","));
        this.getMenus();
        this.fenpeitanchu = false;
        this.$message.success("分配权限成功");
      } catch (error) {}
    },
    //获取菜单
    async getMenusLList() {
      try {
        this.fenpeitanchu = true;
        const { data } = await getMenusTree();
        this.keys.splice(9, Infinity);
        const deep = (children) => {
          for (const child of children) {
            if (child.children) {
              deep(child.children);
            } else {
              this.keys.push(child.id);
            }
          }
        };
        deep(this.model.children);
        console.log(data);
        this.authList = data;
      } catch (error) {}
    },
    //删除标签
    async addTag({ roleName, id }, { authName, id: rid }) {
      try {
        this.$confirm(`您确定要删除【${roleName}]】的【${authName}]】`, {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            let res = await deleteTag(id, rid);
            console.log(res);
            this.getMenus();
            this.$message.success("删除权限成功");
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      } catch (error) {}
    },
    //删除
    async adddelet(id) {
      try {
        this.$confirm("此操作将永久删除该文件0, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            let res = await deletList(id);
            this.getMenus();
            this.$message.success("删除成功");
            console.log(res);
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      } catch (error) {}
    },
    //提交
    async submitForm() {
      try {
        await (this.model.id ? editList : addRolesList)(this.model);
        this.$message.success(this.title + "成功");
        this.getMenus();
        this.tanchu = false;
      } catch (error) {}
    },
    //获取数据
    async getMenus() {
      let res = await getMenusList();
      this.roles = res.data;
      console.log(res, 1122);
    },
  },
};
</script>

<style lang="scss" scoped>
.el-card {
  margin-top: 15px;
}
</style>